<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<title>会议管理</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
	<link th:href="@{/css/update.css}" rel="stylesheet"/>
	<th:block th:include="include :: header('会议管理')" />
	<link th:href="@{/css/meeting/iconfont.css}" rel="stylesheet"/>
	<link th:href="@{/css/meeting/projectPlanView.css}" rel="stylesheet"/>
	<th:block th:include="include :: select2-css" />
    <style>
        .laydate-time-list{padding-bottom:0;overflow:hidden}
        .laydate-time-list>li{width:50%!important;}
        .laydate-time-list>li:last-child { display: none;}
    </style>
</head>
<body>
    <div class="xmTit">会议申请</div>
    <form id="myform">
		<input type="hidden" name="id" value=""/>
		<div class="position-r">
            <div id="enable_edit" class="topFix"></div>
			<div class="xmlist clearfix">
				<div class="name is-required">会议主题：</div>
				<input type="text" name="meetingtheme" value="" autocomplete="off">
			</div>
			<div class="xmlist_line"></div>
			<div class="xmlist w50 clearfix">
				<div class="name">会议日期：</div>
				<input id="startDate" onchange="queryMeetingRoomInfo()" style="width: 95px;" type="text" name="applicationdate" autocomplete="off" />
				<span class="myfl displayIn" style="margin: 1px 5px;padding-top: 2px;">--</span>
				<input id="endDate" onchange="queryMeetingRoomInfo()" style="width: 120px;" type="text" name="applicationdateSecond" autocomplete="off"/>
				<div class="name">会议时间段：</div>
				<input id="startTime" style="width: 55px;" type="text" autocomplete="off" name="starttime"/>
				<span class="myfl displayIn" style="margin: 1px 5px;padding-top: 2px;">--</span>
				<input id="endTime" style="width: 55px;" type="text" name="endtime" autocomplete="off" value=""/>
			</div>
			<div class="xmlist_line"></div>
			<div class="xmlist w50 clearfix">
				<div class="name">会议室：</div>
				<div class="hys">
					<select id="meetingroom" onchange="queryMeetingRoomInfo()" class="form-control m-b" name="meetingroom" th:with="type=${@dict.getType('sys_meeting_room')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictCode}">-- 请选择 --</option>
					</select>
				</div>
			</div>
			<div class="xmlist_line"></div>
			<div class="xmlist w50 clearfix">
				<div class="name">参会人员：</div>
				<div class="hys">
					<select id="attendee" class="form-control select2-multiple" name="attendee" multiple>
						<option th:each="user:${users}" th:value="${user.userId}" th:text="${user.userName}" th:disabled="${user.status == '1'}"></option>
					</select>
				</div>
			</div>
			<div class="xmlist_line"></div>
			<div class="xmlist w50 clearfix">
				<div class="name">备注：</div>
				<textarea name="remark" rows="3"></textarea>
			</div>
			<div class="xmlist_line"></div>
			<div class="text-c mt40 mb20">
				<button id="meetingApplication" type="button" class="btn btn-primary">会议申请</button>
			</div>
			<div id="meetingroomInfo" class="ds" style="width: 90%;margin: 10px auto;">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>会议室</th>
							<th>会议日期</th>
							<th>会议时间段</th>
							<th>会议主题</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</form>
	<th:block th:include="include :: footer" />
	<script th:src="@{/js/meeting/meetingApplication.js}"></script>
	<script th:src="@{/js/meeting/moment.min.js}"></script>
	<th:block th:include="include :: select2-js" />
	<script th:inline="javascript">
		var id = "";
        $(function init() {
            if (id == '') {
                $('#enable_edit').hide();
            }
            layui.use('laydate', function() {
                var laydate = layui.laydate;
                //时间选择器
                laydate.render({
                    elem: '#startDate',
					type: 'date',
					done: function(value, date, endDate){queryMeetingRoomInfo()}
                });

                //时间选择器
                laydate.render({
                    elem: '#endDate',
					type: 'date',
                    done: function(value, date, endDate){queryMeetingRoomInfo()}
                });


                //时间选择器
                laydate.render({
                    elem: '#startTime'
                    , type: 'time'
					, format : 'HH:mm'
                });

                //时间选择器
                laydate.render({
                    elem: '#endTime'
                    , type: 'time'
                    , format : 'HH:mm'
                });
            })

            $('#attendee').select2({
                placeholder: "请选择参会人员",
                allowClear: true
            });
        });


        //申请提交
        $('#meetingApplication').click(function () {
            var meetingtheme = $("input[name='meetingtheme']").val();
            var applicationdate = $("input[name='applicationdate']").val();
            var applicationdateSecond = $("input[name='applicationdateSecond']").val();
            var starttime = $("input[name='starttime']").val();
            var endtime = $("input[name='endtime']").val();
            var meetingroom = $("select[name='meetingroom']").val();
            var attendee = $.form.selectSelects("attendee");
            console.log(attendee)
            var remark = $("textarea[name='remark']").val();
            // var attendee = $("input[name='attendee']").val();
            if(meetingtheme == "" || meetingtheme == undefined){
                layer.alert("请填写会议主题");
                return false;
            }else if(applicationdate == "" || applicationdate == undefined){
                layer.alert("请填写申请日期");
                return false;
            }else if(starttime == "" || starttime == undefined){
                layer.alert("请填写申请时间");
                return false;
            }
            else if(endtime == "" || endtime == undefined){
                layer.alert("请填写申请时间");
                return false;
            }
            else if(!meetingroom || meetingroom == 0 ){
                layer.alert("请选择会议室");
                return false;
            }else if(!attendee || attendee == 0 ){
                layer.alert("请选择至少一位参会人员");
                return false;
            }

            var start_hour = parseInt(starttime.split(":")[0]);
            var start_minute = parseInt(starttime.split(":")[1]);
            var end_hour = parseInt(endtime.split(":")[0]);
            var end_minute = parseInt(endtime.split(":")[1]);
            var start_minutes = start_hour * 60 + start_minute;
            var end_minutes = end_hour * 60 + end_minute;
            if (start_minutes >= end_minutes){
                layer.alert("申请开始时间不得大于或等于结束时间");
                return false;
            }
            if (applicationdateSecond != '' && moment(applicationdate).isAfter(applicationdateSecond, 'day')) {
                layer.alert("申请开始日期不得大于结束日期");
                return false;
            }
            var param = {};
            param.meetingTheme = meetingtheme;
            param.applicationDate = applicationdate;
            param.applicationDateSecond = applicationdateSecond;
            param.startTime = starttime;
            param.endTime = endtime;
            param.meetingRoom = meetingroom;
            param.meetingTheme = meetingtheme;
            param.remark = remark;
            param.attendee = attendee;
            $.ajax({
                url: '/meetingApplication/add',
                data: JSON.stringify(param),
                type: 'post',
                dataType: 'json',
				contentType: 'application/json',
                success: function (e) {
                    if(e.code == 0){
                        layer.msg('申请成功', {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            var _iframe = window.parent.document;
                            var year = $(_iframe).find(".mycal .midData .ym .y").text();
                            var month = $(_iframe).find(".mycal .midData .ym .m").text() - 1;
                            var date = $(_iframe).find(".mycal .day .nowdate").text();
                            var v = new Date(year, month, date);
                            parent.draw_calander(v);
                            parent.layer.closeAll();
                            parent.load_audit_status();
                            parent.loadOtherData();
                        });
                    }else{
                        layer.msg(e.msg, {
                            icon: 2,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        });
					}
                }
            });
        });

        function queryMeetingRoomInfo() {
            var applicationdate = $("input[name='applicationdate']").val();
            var applicationdateSecond = $("input[name='applicationdateSecond']").val();
            var meetingroom = $("[name='meetingroom']").val();
            if (applicationdate == '' || meetingroom == 0) {
                $('#meetingroomInfo').hide();
                return;
            }
            if (applicationdateSecond != '' && moment(applicationdate).isAfter(applicationdateSecond, 'day')) {
                layer.alert("申请开始日期不得大于结束日期");
                return ;
            }

            load_meetingroomInfo();
        }

        function load_meetingroomInfo() {
            $('#meetingroomInfo table tbody').empty();
            $('#meetingroomInfo').hide();
            var applicationdate = $("input[name='applicationdate']").val();
            var applicationdateSecond = $("input[name='applicationdateSecond']").val();
            var id = $("input[name='id']").val();
            var meetingroom = $("[name='meetingroom']").val();
            $.ajax({
                url: '/meetingApplication/queryMeetingRoomInfo',
                data: {'id': id,'applicationDate': applicationdate,'applicationDateSecond': applicationdateSecond, 'meetingRoom': meetingroom},
                dataType: 'json',
                success: function(e) {
                    console.log(e)
                    if (e.length > 0) {
                        var html = '';
                        $.each(e, function(index, item) {
                            html += '<tr>' +
                                '	<td>'+ item.meetingRoomName +'</td>' +
                                '	<td>'+ (item.applicationDate == item.applicationdateSecond ? item.applicationDate : (item.applicationDate + ' -- ' + item.applicationDateSecond)) +'</td>' +
                                '	<td>'+ item.startTime + '-' + item.endTime +'</td>' +
                                '	<td>'+ item.meetingTheme +'</td>' +
                                '</tr>';
                        });
                        $('#meetingroomInfo table tbody').append(html);
                        $('#meetingroomInfo').toggle();
                    }
                }
            });
        };

        queryMeetingRoomInfo()
	</script>
</body>
</html>